﻿
@page
@model AdminUI.Pages.Mall.GoodsModel
@{
    var F = Html.F();
}

@section body {
    <f:Panel ID="Panel1" BodyPadding="5" ShowBorder="false" Layout="VBox" ShowHeader="false" IsViewPort="true">
        <Items>
            <f:Grid ID="Grid1" BoxFlex="1" ShowBorder="true" ShowHeader="false" EnableTextSelection="true" EnableColumnLines="true" EnableCheckBoxSelect="false" EnableMultiSelect="false" AllowSorting="true" AllowPaging="true" IsDatabasePaging="true"
                    DataIDField="GoodsID" DataTextField="GoodsName" SortingCancel="true" SortingToolTip="true" PageSize="@ViewBag.PageSize" RecordCount="@ViewBag.Total" DataSource="@ViewBag.DataSource"
                OnSort="@Url.Handler("Grid_DoAction")" OnSortFields="Panel1" OnPageIndexChanged="@Url.Handler("Grid_DoAction")" OnPageIndexChangedFields="Panel1" EnableTextSelection="true" FixedRowHeight="true" RowHeight="60">
                <Toolbars>
                    <f:Toolbar ID="Toolbar1" ToolbarAlign="Right" ItemSpace="1">
                        <Items>
                            <f:Button ID="btnAdd" IconAlign="Left" EnableDefaultState="false" IconFont="_Plus" Text="新增" OnClientClick="onAddClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnEdit" IconAlign="Left" EnableDefaultState="false" IconFont="_Edit" Text="编辑" OnClientClick="onEditClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnAlbum" IconAlign="Left" EnableDefaultState="false" IconFont="_Pic" Text="相册" OnClientClick="onAlbumClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnVideo" IconAlign="Left" EnableDefaultState="false" IconFont="VideoCamera" Text="视频" OnClientClick="onVideoClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnDelete" IconAlign="Left" EnableDefaultState="false" IconFont="TrashO" Text="删除" OnClientClick="onDeleteClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnSetUp" IconAlign="Left" EnableDefaultState="false" IconFont="_PullUp" Text="上架" OnClientClick="onSetUpClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnSetDown" IconAlign="Left" EnableDefaultState="false" IconFont="_PullDown" Text="下架" OnClientClick="onSetDownClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnDetails" IconAlign="Left" EnableDefaultState="false" IconFont="_List" Text="详情" OnClientClick="onDetailsClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnRefresh" IconAlign="Left" EnableDefaultState="false" IconFont="_Refresh" Text="刷新" OnClientClick="onRefreshClick();"></f:Button>
                            <f:ToolbarFill ID="ToolbarFill1"></f:ToolbarFill>
                            <f:DropDownList ID="Condition" SelectedValue="" Width="150">
                                <f:ListItem Text="== 请选择条件 ==" Value="" />
                                <f:ListItem Text="商品ID" Value="GoodsID" />
                                <f:ListItem Text="商品名称" Value="GoodsName" />
                            </f:DropDownList>
                            <f:TriggerBox ID="Keyword" ShowLabel="false" EmptyText="请输入搜索关键字" TriggerIcon="Search" OnTriggerClick="@Url.Handler("Grid_DoAction")" OnTriggerClickFields="Panel1">
                            </f:TriggerBox>
                        </Items>
                    </f:Toolbar>
                </Toolbars>
                <Columns>
                    @*<f:RowNumberField HeaderText="#" TextAlign="Center" />*@
                    <f:RenderField HeaderText="商品ID" DataField="GoodsID" FieldType="Int" QuickSortField="true" Width="100" TextAlign="Center" />
                    <f:RenderField HeaderText="主图" DataField="ImageUrl" RendererFunction="renderImage" Width="80" TextAlign="Center" />
                    <f:RenderField HeaderText="商品名称" DataField="GoodsName" MinWidth="260" ShowToolTip="true" ExpandUnusedSpace="false" />
                    <f:RenderField HeaderText="类别" DataField="CategoryID" FieldType="Int" RendererFunction="renderCategory" Width="150" />
                    <f:RenderField HeaderText="类别名称" DataField="CategoryName" Width="100" Hidden="true" />
                    <f:RenderField HeaderText="成本价" DataField="CostPrice" FieldType="Double" Width="80" TextAlign="Right" />
                    <f:RenderField HeaderText="市场价" DataField="MarketPrice" FieldType="Double" Width="80" TextAlign="Right" />
                    <f:RenderCheckField HeaderText="特价" DataField="IsSpecial" RenderAsStaticField="false" Width="60" TextAlign="Center" />
                    <f:RenderField HeaderText="A级会员价" DataField="MAPrice" FieldType="Double" Width="100" TextAlign="Right" />
                    <f:RenderField HeaderText="B级会员价" DataField="MBPrice" FieldType="Double" Width="100" TextAlign="Right" />
                    <f:RenderField HeaderText="C级会员价" DataField="MCPrice" FieldType="Double" Width="100" TextAlign="Right" />
                    <f:RenderField HeaderText="业绩提成" DataField="Commission" FieldType="Double" Width="80" TextAlign="Right" />
                        <f:RenderField HeaderText="销售范围" DataField="SalesRange" FieldType="Int" Width="80" RendererFunction="renderSalesRange" TextAlign="Center"/>
                    <f:RenderField HeaderText="已售数量" DataField="SalesNum" FieldType="Int" Width="80" TextAlign="Right" />
                    @* <f:RenderField HeaderText="创建时间" DataField="CreateTime" FieldType="Date" Renderer="Date" RendererArgument="yyyy-MM-dd" Width="100" TextAlign="Center" /> *@
                    <f:RenderField HeaderText="排序" DataField="SortFlag" FieldType="Int" Width="60" TextAlign="Center" />
                    <f:RenderField HeaderText="状态" DataField="Status" FieldType="Int" Width="70" RendererFunction="renderStatus" TextAlign="Center" />
                </Columns>
                <PageItems>
                    <f:ToolbarSeparator></f:ToolbarSeparator>
                    <f:ToolbarText Text="每页记录数："></f:ToolbarText>
                    <f:DropDownList ID="ddlGridPageSize" Width="60" SelectedValue="@ViewBag.PageSize" OnSelectedIndexChanged="@Url.Handler("Grid_DoAction")" OnSelectedIndexChangedFields="Panel1">
                        <Items>
                            <f:ListItem Text="10" Value="10"></f:ListItem>
                            <f:ListItem Text="20" Value="20"></f:ListItem>
                            <f:ListItem Text="30" Value="30"></f:ListItem>
                            <f:ListItem Text="50" Value="50"></f:ListItem>
                            <f:ListItem Text="100" Value="100"></f:ListItem>
                            <f:ListItem Text="200" Value="200"></f:ListItem>
                        </Items>
                    </f:DropDownList>
                </PageItems>
            </f:Grid>
        </Items>
    </f:Panel>
    <f:Window ID="Window1" IsModal="true" Hidden="true" Target="Top" EnableResize="true" EnableMaximize="true" EnableIFrame="true" Width="800" Height="600">
        @*<Listeners>
                <f:Listener Event="close" Handler="onWindowClose('refresh');"></f:Listener>
            </Listeners>*@
    </f:Window>
}

@section script {
    <script src="~/res/js/grid.js"></script>
    <script>
        function onAddClick(event) {
            var path = "/Mall/GoodsAdd";
            F.ui.Window1.show(path, '新增自营商品');
        }

        function onEditClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要修改的记录！');
                return;
            }

            var selectedRow = grid1.getSelectedRow();
            var path = "/Mall/GoodsEdit?id=" + selectedRow;
            F.ui.Window1.show(path, '编辑自营商品：'+selectedRow);
        }

        function onDeleteClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要删除的记录！');
                return;
            }

            var selectedRows = grid1.getSelectedRows();
            F.confirm({
                message: '确定要删除所选记录吗？',
                target: '_top',
                ok: function () {
                    F.doPostBack('@Url.Handler("Grid_DoAction")', 'Panel1', {
                        actionType: 'delete',
                        selectedIDs: selectedRows
                    });
                }
            });
        }
        function onSetUpClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要上架的商品！');
                return;
            }

            var selectedRows = grid1.getSelectedRows();
            F.confirm({
                message: '确定要上架所选商品吗？',
                target: '_top',
                ok: function () {
                    F.doPostBack('@Url.Handler("Grid_DoAction")', 'Panel1', {
                        actionType: 'setUp',
                        selectedIDs: selectedRows
                    });
                }
            });
        }
        function onSetDownClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要下架的商品！');
                return;
            }

            var selectedRows = grid1.getSelectedRows();
            F.confirm({
                message: '确定要下架所选商品吗？',
                target: '_top',
                ok: function () {
                    F.doPostBack('@Url.Handler("Grid_DoAction")', 'Panel1', {
                        actionType: 'setDown',
                        selectedIDs: selectedRows
                    });
                }
            });
        }
        function onAlbumClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择商品记录！');
                return;
            }

            var selectedRow = grid1.getSelectedRow();
            var path = "/BaseData/Album?rid=" + selectedRow;
            F.ui.Window1.show(path, '商品相册管理', 800, 600);
        }
        function onVideoClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择商品记录！');
                return;
            }

            var selectedRow = grid1.getSelectedRow();
            var path = "/BaseData/Video?rid=" + selectedRow;
            F.ui.Window1.show(path, '商品视频管理', 800, 600);
        }
       
        function onDetailsClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要查看的记录！');
                return;
            }

            var selectedRow = grid1.getSelectedRow();
            var path = "/Mall/GoodsDetails?id=" + selectedRow;
            F.ui.Window1.show(path, '查看商品详情');
        }
        function onQrCodeClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要生成推广码的记录！');
                return;
            }

            var row = grid1.getSelectedRow(true);
            var path = "/Modules/PromotionCode?t=G&rid=" + row.id + "&tid=" + row.values.TID;
            F.ui.Window1.show(path, '获取商品推广码', 500, 550);
        }
        function onRefreshClick() {
            F.doPostBack('@Url.Handler("Grid_DoAction")', 'Panel1');
        }

        //状态：1-销售中，2-已下架，9-已删除
        function renderStatus(value, params) {
            switch (value) {
                case 1:
                    return "<span class='tag-success'>在售</span>";
                case 2:
                    return "<span class='tag-default'>下架</span>";
                case -1:
                    return "<span class='tag-error'>删除</span>";
                default:
                    return "<span class='tag-warning'>待售</span>";
            }
        }


        //销售范围：1-A级，2-B级，4-C级
        function renderSalesRange(value, params) {
            if (value > 0) {
                var s = '';
                if ((value & 1) > 0) s += "A "
                if ((value & 2) > 0) s += "B "
                if ((value & 4) > 0) s += "C "

                return s.trim();
            }
            else {
                return "-";
            }
        }


        //图片预览
        function renderImage(value, params) {
            //return '<a href="javascript:;" class="imagePreview">预览</a>'; //文字链接
            //return '<a href="javascript:;" title="预览图片" class="imagePreview"><i class="f-icon f-icon-image f-grid-cell-iconfont"></i></a>';//图片字体按钮
            return '<a href="javascript:;" class="imagePreview"><img style="width:58px;height:45px;margin:0,auto;" src="' + value + '"/></a>';//自定义图片按钮
            //return '<a href="javascript:;" class="imagePreview"><img class="f-grid-cell-icon" src="@Url.Content("~/res/icon/pencil.png")"></a>';//自定义图片按钮
        }

        F.ready(function () {
            //var grid = F.ui.Grid1;

            ////注册图片预览单击事件
            //grid.el.on('click', 'a.imagePreview', function (event) {
            //    var rowEl = $(this).closest('.f-grid-row');
            //    var rowData = grid.getRowData(rowEl);

            //    var path = "/Dialog/ImagePreview?url=" + rowData.values.ImageUrl;
            //    F.ui.Window1.show(path, '图片预览', 800, 800);
            //});

            var preview = new Preview({
                imgWrap: 'Grid1' // 指定该容器里的图片点击预览
            })
        });

    </script>
    <script src="~/res/third-party/jspciyl/preview.js"></script>
}

@section head{
    <link rel="stylesheet" type="text/css" href="~/res/third-party/jspciyl/preview.css" />
    <style>
        .f-grid-cell.f-grid-cell-GoodsName .f-grid-cell-inner {
            white-space: normal;
            word-break: break-all;
        }
    </style>
}
